<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>

      const width = 800 ;
      const height = 600 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");


        const data = ['a','b','c','d','e'] ;
        const colorScale = d3.scaleOrdinal()
          .domain(data)
          .range(d3.schemeSet3)
        
        svg.append('line')
          .attr('x1',100)
          .attr('y1',500)
          .attr('x2',700)
          .attr('y2',500)
          .attr('stroke','#ccc');
        const g = svg.append('g').attr('transform','translate(100,100)')
        
        const circles = g.selectAll('circle')
          .data(data)
          .join('circle')
          .attr('cx',(d,i)=>i*100 + 50)
          .attr('cy',50)
          .attr('r',45)
          .attr('fill',d=>colorScale(d))

       
          circles.on('click',(e,d)=>{
              //终止之前的动画
              //circles.interrupt()
              d3.select(e.target)
                .transition('a')
                .duration(3000)
                .attr('cy',350)
                // .on('interrupt',function(d,i){
                //    d3.select(this).attr('fill','#ccc')
                // })
                // .on('end',(d,i,list)=>{
                //   d3.select(list[i]).attr('fill','steelblue')
                // })
          })
        .on('mouseout',(e,d)=>{
           d3.select(e.target)
            .transition('b')
            .duration(1000)
            .attr('cx',parseInt(d3.select(e.target).attr('cx'))+100)
        })


    </script>
  </body>
</html>
